<template>
  <div class="statistics-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>数据统计</h2>
      <el-button type="primary" @click="loadStatistics">
        <el-icon><Refresh /></el-icon>
        刷新数据
      </el-button>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in statisticsCards" :key="item.title">
        <div class="stat-card" :class="`stat-card--${item.type}`">
          <div class="stat-card__icon">
            <el-icon :size="32">
              <component :is="item.icon" />
            </el-icon>
          </div>
          <div class="stat-card__content">
            <div class="stat-card__title">{{ item.title }}</div>
            <div class="stat-card__value">{{ item.value }}</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 分类统计图表 -->
    <el-row class="charts-row">
      <el-col :span="24">
        <div class="chart-card">
          <div class="chart-card__header">
            <div class="chart-card__title">
              <h3>分类分布</h3>
              <span class="subtitle">文章分类占比分析</span>
            </div>
            <div class="chart-card__actions">
              <el-radio-group v-model="chartViewType" size="small">
                <el-radio-button label="pie">饼图</el-radio-button>
                <el-radio-button label="bar">柱状图</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="chart-container" ref="categoryChartRef"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch, onUnmounted } from 'vue'
import { Document, Collection, Tickets, Star, Refresh } from '@element-plus/icons-vue'
import { getStatistics } from '@/api/article'
import { handleError } from '@/utils/error-handler'
import * as echarts from 'echarts'
import type { ArticleStatistics } from '@/api/types'

const statistics = ref<ArticleStatistics>({
  totalArticles: 0,
  totalCategories: 0,
  totalTags: 0,
  mostUsedCategory: ''
})

// 图表视图类型
const chartViewType = ref('pie')

// 统计卡片数据
const statisticsCards = computed(() => [
  {
    title: '文章总数',
    value: statistics.value.totalArticles,
    icon: Document,
    type: 'primary'
  },
  {
    title: '分类总数',
    value: statistics.value.totalCategories,
    icon: Collection,
    type: 'success'
  },
  {
    title: '标签总数',
    value: statistics.value.totalTags,
    icon: Tickets,
    type: 'warning'
  },
  {
    title: '最常用分类',
    value: statistics.value.mostUsedCategory || '-',
    icon: Star,
    type: 'danger'
  }
])

// 图表引用
const categoryChartRef = ref<HTMLElement>()

// 加载统计数据
async function loadStatistics() {
  try {
    const response = await getStatistics()
    if (response?.data?.data) {
      statistics.value = response.data.data
      initCharts()
    }
  } catch (error) {
    handleError(error)
  }
}

// 初始化图表
function initCharts() {
  if (categoryChartRef.value) {
    const categoryChart = echarts.init(categoryChartRef.value)
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)',
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderColor: '#eee',
        borderWidth: 1,
        textStyle: {
          color: '#333'
        }
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 'center',
        textStyle: {
          fontSize: 14
        }
      },
      series: [
        {
          name: '分类分布',
          type: chartViewType.value,
          radius: chartViewType.value === 'pie' ? ['40%', '70%'] : undefined,
          center: ['40%', '50%'],
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 8,
            borderWidth: 2,
            borderColor: '#fff'
          },
          label: {
            show: true,
            formatter: '{b}: {c} ({d}%)'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 14,
              fontWeight: 'bold'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.2)'
            }
          },
          data: [
            { value: statistics.value.totalCategories, name: '已分类' },
            { value: statistics.value.totalArticles - statistics.value.totalCategories, name: '未分类' }
          ]
        }
      ]
    }

    if (chartViewType.value === 'bar') {
      option.xAxis = { type: 'category' }
      option.yAxis = { type: 'value' }
      option.series[0].data = option.series[0].data.map(item => ({
        value: item.value,
        name: item.name,
        itemStyle: {
          borderRadius: [8, 8, 0, 0]
        }
      }))
    }

    categoryChart.setOption(option)
  }
}

// 监听图表类型变化
watch(chartViewType, () => {
  initCharts()
})

// 添加窗口大小变化监听
onMounted(() => {
  loadStatistics()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

function handleResize() {
  if (categoryChartRef.value) {
    echarts.getInstanceByDom(categoryChartRef.value)?.resize()
  }
}
</script>

<style scoped lang="scss">
.statistics-page {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    
    h2 {
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: #303133;
    }
  }

  .stat-card {
    padding: 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    background: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: currentColor;
      opacity: 0.1;
    }

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    &__icon {
      padding: 16px;
      border-radius: 12px;
      margin-right: 16px;
      background: currentColor;
      opacity: 0.1;
      
      .el-icon {
        display: flex;
        color: currentColor;
      }
    }

    &__content {
      flex: 1;
    }

    &__title {
      font-size: 14px;
      color: #909399;
      margin-bottom: 8px;
    }

    &__value {
      font-size: 28px;
      font-weight: 600;
      line-height: 1.2;
      margin-bottom: 8px;
    }

    &__trend {
      display: flex;
      align-items: center;
      font-size: 13px;
      gap: 4px;
    }

    // 不同类型的卡片样式
    &--primary {
      .stat-card__icon {
        background-color: rgba(64, 158, 255, 0.1);
        color: #409eff;
      }
      .stat-card__value {
        color: #409eff;
      }
    }

    &--success {
      .stat-card__icon {
        background-color: rgba(103, 194, 58, 0.1);
        color: #67c23a;
      }
      .stat-card__value {
        color: #67c23a;
      }
    }

    &--warning {
      .stat-card__icon {
        background-color: rgba(230, 162, 60, 0.1);
        color: #e6a23c;
      }
      .stat-card__value {
        color: #e6a23c;
      }
    }

    &--danger {
      .stat-card__icon {
        background-color: rgba(245, 108, 108, 0.1);
        color: #f56c6c;
      }
      .stat-card__value {
        color: #f56c6c;
      }
    }
  }

  // 图表卡片样式
  .charts-row {
    margin-top: 24px;
  }

  .chart-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    &__title {
      h3 {
        margin: 0 0 4px;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }

      .subtitle {
        font-size: 13px;
        color: #909399;
      }
    }

    .chart-container {
      height: 400px;
    }
  }
}

// 暗色主题适配
html.dark {
  .statistics-page {
    background-color: #1a1a1a;

    .stat-card,
    .chart-card {
      background: #2b2b2b;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    .page-header h2 {
      color: #e5eaf3;
    }

    .chart-card__title h3 {
      color: #e5eaf3;
    }
  }
}

// 响应式布局
@media screen and (max-width: 1200px) {
  .statistics-page {
    .el-col {
      width: 50% !important;
    }
  }
}

@media screen and (max-width: 768px) {
  .statistics-page {
    .el-col {
      width: 100% !important;
    }
  }
}
</style> 